<template>
  <div>
    <div v-for="listDog in ListDogs"
         style="margin-top:3%"
         v-if="registration">
      <el-card class="box-card"
               style="margin-left:15%">
        <div slot="header"
             class="clearfix"
             style="margin-left:44%">
          <span>养犬登记</span>
        </div>
        <div>
          <div>
            <img :src="listDog.dog_positive_image"
                 style="width:200px;height:200px">
          </div>

          <div>
            <h4 style="margin-left:13%">状态</h4>
            <h3 style="color:red;margin-left:9%">{{audit(listDog.person_info_audit,listDog.pet_infoaudit)}}</h3>
          </div>

          <div style="float: left;margin-top:-50%;margin-left:40%">

            <h4>犬名:<span>
                {{listDog.dog_name}}
              </span></h4>

            <h4>犬种:<span>
                {{listDog.dog_type}}
              </span>
            </h4>

            <h4>犬主:<span>
                {{listDog.name}}
              </span>
            </h4>

            <h4>证件号码:<span>
                {{listDog.icd}}
              </span>
            </h4>

            <h4>电话:<span>
                {{listDog.tel}}
              </span>
            </h4>

            <h4>登记时间:<span>
                {{new Date(listDog.apply_date).toLocaleString()}}
              </span>
            </h4>

            <el-button type="primary"
                       style="margin-left:50%"
                       @click="check_details(listDog)"
                       plain>查看详情</el-button>
          </div>
        </div>
      </el-card>
    </div>

    <div v-if="details">

      <el-page-header @back="back"
                      content="详情页面">
      </el-page-header>
      <!-- 分割线 -->
      <!-- <el-divider></el-divider> -->
      <!--  -->
      <div>
        <template>
          <!-- stretch="true":标签的宽度是否自撑开	 -->
          <el-tabs v-model="activeName"
                   @tab-click="handleClick"
                   :stretch="true">
            <el-tab-pane label="办理进度"
                         name="first"></el-tab-pane>
            <el-tab-pane label="个人登记信息"
                         name="second"></el-tab-pane>
            <el-tab-pane label="宠物登记信息"
                         name="third"></el-tab-pane>

          </el-tabs>
        </template>
      </div>

      <div style="height: 600px;margin-left:12%;margin-top:7%"
           v-if="progress">
        <el-steps direction="vertical"
                  :active="1">
          <el-step></el-step>
          <el-step></el-step>
          <el-step></el-step>
        </el-steps>
      </div>

      <!-- 办理进度的div -->
      <div v-if="progress">
        <div style="margin-left:22%;margin-top:-63%">
          <el-card class="box-card">
            <div slot="header"
                 class="clearfix">
              <span>已登记</span>
            </div>
            <div style="margin-top:-3%">
              <h4>业务类型: 个人养犬登记</h4>
              <h4>登记类型: 个人登记</h4>
              <h4>办理途径: 线上</h4>
              <h4>业务性质: 缴费办理</h4>
            </div>
            <div style="float:right;margin-top:-20%">
              <img src="../../../../assets/img/through.png"
                   alt=""
                   style="width:200px;height:100px;">
            </div>
          </el-card>
        </div>

        <div style="margin-left:22%;margin-top:2%">
          <el-card class="box-card">
            <div slot="header"
                 class="clearfix">
              <span>个人信息审核</span>
            </div>
            <div style="margin-top:-3%">
              <h4>{{"审核人:"}}{{this.aduit_info.reviewer}}</h4>
              <h4>审核单位: 成都新东方烹饪学校</h4>
              <h4 v-if="this.aduit_info.person_info_audit==2">{{"原因: "}}{{this.aduit_info.person_info_failure_reason}}</h4>
              <div style="float:right;margin-top:-20%"
                   v-if="this.aduit_info.person_info_audit==1">
                <img src="../../../../assets/img/through.png"
                     alt=""
                     style="width:200px;height:100px;">
              </div>
              <div style="float:right;margin-top:-20%"
                   v-if="this.aduit_info.person_info_audit==2">
                <img src="../../../../assets/img/failure.png"
                     alt=""
                     style="width:200px;height:100px;">
              </div>
            </div>
          </el-card>
        </div>

        <div style="margin-left:22%;margin-top:2%">
          <el-card class="box-card">
            <div slot="header"
                 class="clearfix">
              <span>宠物信息审核</span>
            </div>
            <div style="margin-top:-3%">
              <h4>{{"审核人:"}}{{this.aduit_info.reviewer}}</h4>
              <h4>审核单位: 成都新东方烹饪学校</h4>
              <h4 v-if="this.aduit_info.pet_infoaudit==2">{{"原因: "}}{{this.aduit_info.pet_info_failure_reason}}</h4>
              <div style="float:right;margin-top:-20%"
                   v-if="this.aduit_info.pet_infoaudit==1">
                <img src="../../../../assets/img/through.png"
                     alt=""
                     style="width:200px;height:100px;">
              </div>
              <div style="float:right;margin-top:-20%"
                   v-if="this.aduit_info.pet_infoaudit==2">
                <img src="../../../../assets/img/failure.png"
                     alt=""
                     style="width:200px;height:100px;">
              </div>
            </div>
          </el-card>
        </div>
      </div>

      <!-- 个人信息的div -->
      <div v-if="personal_info">
        <h3 style="margin-left:25%">{{"犬主姓名 : "}}
          <span style="margin-left:30%">{{this.aduit_info.name}}</span>
        </h3>

        <h3 style="margin-left:25%">{{"证件类型 : "}}
          <span style="margin-left:30%">{{this.aduit_info.id_type}}</span>
        </h3>

        <h3 style="margin-left:25%">{{"证件号码 : "}}
          <span style="margin-left:30%">{{this.aduit_info.icd}}</span>
        </h3>

        <h3 style="margin-left:25%">{{"联系电话 : "}}
          <span style="margin-left:30%">{{this.aduit_info.tel}}</span>
        </h3>

        <h3 style="margin-left:25%">{{"证件地址 : "}}
          <span style="margin-left:30%">{{this.aduit_info.domicile_address}}</span>
        </h3>

        <h3 style="margin-left:25%">{{"现住地址 : "}}
          <span style="margin-left:30%">{{this.aduit_info.now_address}}</span>
        </h3>

        <h3 style="margin-left:25%">{{"详细地址 : "}}
          <span style="margin-left:30%">{{this.aduit_info.detailed_address}}</span>
        </h3>

        <h3 style="margin-left:25%;margin-top:10%">证明材料:</h3>

        <div style="margin-left:35%;margin-top:-10%">
          <img :src="this.aduit_info.icd_image"
               alt=""
               style="float:left"
               class="avatar">
          <img :src="this.aduit_info.person_image"
               alt=""
               style="float:left;margin-left:2%"
               class="avatar">
          <img :src="this.aduit_info.supporting_material"
               alt=""
               style="float:left;margin-left:2%"
               class="avatar">
        </div>

      </div>

      <!-- 宠物信息信息的div -->
      <div v-if="pet_info">
        <h3 style="margin-left:25%">{{"犬名 : "}}
          <span style="margin-left:30%">{{this.aduit_info.dog_name}}</span>
        </h3>

        <h3 style="margin-left:25%">{{"犬种 : "}}
          <span style="margin-left:30%">{{this.aduit_info.dog_type}}</span>
        </h3>

        <h3 style="margin-left:25%">{{"性别 : "}}
          <span style="margin-left:30%">{{this.aduit_info.dog_sex}}</span>
        </h3>

        <h3 style="margin-left:25%">{{"体重 : "}}
          <span style="margin-left:30%">{{this.aduit_info.dog_weight+"kg"}}</span>
        </h3>

        <h3 style="margin-left:25%">{{"肩高 : "}}
          <span style="margin-left:30%">{{this.aduit_info.dog_heigh+"cm"}}</span>
        </h3>

        <h3 style="margin-left:25%">{{"体长 : "}}
          <span style="margin-left:30%">{{this.aduit_info.dog_long+"cm"}}</span>
        </h3>

        <h3 style="margin-left:25%;margin-top:10%">宠物材料:</h3>

        <div style="margin-left:35%;margin-top:-10%">
          <img :src="this.aduit_info.dog_positive_image"
               alt=""
               style="float:left"
               class="avatar">
          <img :src="this.aduit_info.dog_side_image"
               alt=""
               style="float:left;margin-left:2%"
               class="avatar">
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import axios from "axios";
import common from "../../../../assets/commons"
export default {
  data () {
    return {
      //后台查询到的申请审批的集合
      ListDogs: {},
      //具体的审批状态
      status: '',
      //
      registration: true,
      //
      details: false,
      //
      activeName: 'first',
      //点击查看详情后这个集合保存当前点进去的详情信息
      aduit_info: {},
      //控制个人信息审核不通过原因显示
      error_pet: false,
      //显示card标签中的办理进度
      progress: true,
      //显示card标签中的个人信息
      personal_info: false,
      //显示card标签中的宠物进度
      pet_info: false,
    }
  },
  methods: {
    //查询该角色下所有的申请信息
    raiseDog () {
      axios.get(common.baseUrl + "user/user/raiseDog?id=" + this.$store.state.userid + "").then(res => {
        console.log(res);
        this.ListDogs = res.data;
      })
    },
    /**
     * person_info_audit:用户信息
     * pet_infoaudit:宠物信息
     */
    audit (person_info_audit, pet_infoaudit) {
      //如果这两个都是0,说明还没有开始审核
      if (person_info_audit == 0 && pet_infoaudit == 0) {
        return "正在审核中";
      }
      //如果这两个都是0,说明还没有开始审核
      if (person_info_audit == 1 && pet_infoaudit == 1) {
        return "审核通过";
      }
      //如果person_info_audit==2,说明用户信息审核失败
      if (person_info_audit == 2 || pet_infoaudit == 2) {
        return "审核不通过";
      }
      //如果person_info_audit==2,说明用户信息审核失败
      if (person_info_audit == 0 || pet_infoaudit == 2) {
        return "审核不通过";
      }
      //如果person_info_audit==2,说明用户信息审核失败
      if (person_info_audit == 2 || pet_infoaudit == 0) {
        return "审核不通过";
      }
    },

    //查看详情
    check_details (listDog) {
      this.aduit_info = listDog
      this.registration = false
      this.details = true
    },
    //控制详情的点击事件
    handleClick (tab, event) {
      //   console.log(tab, event);
      console.log(tab);
      //说明点击的是办理进度
      if (tab.index == 0) {
        this.progress = true,
          this.personal_info = false,
          this.pet_info = false
      }
      //说明点击的是个人信息
      if (tab.index == 1) {
        this.progress = false,
          this.personal_info = true,
          this.pet_info = false
      }
      //说明点击的是宠物信息
      if (tab.index == 2) {
        this.progress = false,
          this.personal_info = false,
          this.pet_info = true
      }
    },
    //返回
    back () {
      //将card那个页面显示
      this.registration = true
      //显示详情
      this.details = false
      //详情页面退出时将activeName重置
      this.activeName = "first",
        this.progress = true,
        this.personal_info = false,
        this.pet_info = fals
    }
  },
  mounted () {
    this.raiseDog();
  },
  computed: {

  },
};
</script>
<style scoped>
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 700px;
}
</style>
